import React, { useState } from 'react';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import { Link } from 'umi';
import { getItems } from '@/services/aqchain-antd/item';

const columns: ProColumns<API.ModelsItem>[] = [
  {
    title: '序号',
    width: 80,
    valueType: 'index',
  },
  {
    title: '作品名称',
    dataIndex: 'name',
    copyable: true,
  },
  {
    title: '作品类型',
    width: 120,
    dataIndex: 'category',
    valueEnum: {
      1: '文字作品',
      2: '图片作品',
      3: '视频作品',
    },
  },
  {
    title: '作品介绍',
    dataIndex: 'description',
    hideInSearch: true,
    ellipsis: true,
  },
  {
    title: '状态',
    width: 120,
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      1: '可交易',
      2: '定价出售中',
      3: '拍卖中',
      4: '授权中',
    },
  },
  {
    title: '所有者',
    dataIndex: 'owner',
    hideInSearch: true,
    render: (_, record) => {
      return record.owner?.username;
    },
  },
  {
    title: '操作',
    valueType: 'option',
    render: (_, record) => {
      return <Link to={`/market/item/${record.fileHash}`}>详情</Link>;
    },
  },
];

const ItemTable: React.FC = () => {
  return (
    <PageContainer>
      <ProTable
        headerTitle="作品列表"
        cardBordered
        rowKey="fileHash"
        options={false}
        columns={columns}
        params={{ approved: '0x12a0674e1ba219A2FF793aEF870779F4ce75Ff35' }}
        request={(params) => getItems({ ...params })}
      />
    </PageContainer>
  );
};

export default ItemTable;
